<template>
    <div>
        <left-layout>
            <div v-if="$route.path === '/'" class="swiper">
                <Swiper />
            </div>
            <div v-if="$route.path !== '/'" class="cateage">
                <p>
                    <span>{{ $route.params.id }}</span> 分类文章
                </p>
                <p>共搜索到 <span>0</span> 篇</p>
            </div>
            <div v-if="$route.name==='tag'">
                <ArticleTag  :articleTag="articleTag"/>
            </div>
            <div v-else class="leftarticle">
                <ThirdRoute :categoryList="categoryList" />
                <div
                    v-if="$route.path === '/'"
                    class="leftcount"
                    v-infinite-scroll="loadMore"
                    infinite-scroll-disabled="busy"
                    infinite-scroll-distance="10"
                >
                    <li v-for="item in articleList" :key="item.id">
                        <article-item :item="item"></article-item>
                    </li>
                </div>
            </div>
            <div v-if="$route.path!=='/'" class="nodata">
                <div class="empty">暂无数据</div>
            </div>
        </left-layout>
        <div class="right">
            <div class="sticky">
                <div
                    class="recommend"
                    v-if="recommendFlag"
                    :style="{ marginTop: i + 'px' }"
                ></div>
                <!-- <div class="recommend" v-if="recommendFlag"></div> -->
                <right-layout
                    :articleList="articleList"
                ></right-layout>
                <RightmidLayout :articleTag="articleTag" />
                <div class="footer">
                    <RightBotm />
                </div>
            </div>
        </div>
        <BackTop />
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import LeftLayout from "@/components/LeftLayout";
import RightLayout from "@/components/RightLayout";
import infiniteScroll from "vue-infinite-scroll";
import ArticleItem from "@/components/ArticleItem";
import ThirdRoute from "@/components/ThirdRoute";
import Swiper from "@/components/Swiper";
import RightmidLayout from "@/components/RightmidLayout";
import RightBotm from "@/components/RightBotm";
import BackTop from "@/components/BackTop";
import ArticleTag from '@/components/ArticleTag'
import Vue from "vue";

Vue.use(infiniteScroll);

export default {
    directives: {
        infiniteScroll,
    },
    components: {
        LeftLayout,
        RightLayout,
        ArticleItem,
        ThirdRoute,
        RightmidLayout,
        Swiper,
        RightBotm,
        BackTop,
        ArticleTag,
    },
    watch:{
        $route(){
            // console.log(arguments);
            if(arguments[0].params.id!==arguments[1].params.id){
                this.getCategoryData(arguments[0].params.id)
            }
        }
    },
    computed: {
        ...mapState({
            articleList: (state) => state.article.articleList,
            articleTag: (state) => state.article.articleTag,
            categoryList: (state) => state.article.categoryList,
            page: (state) => state.article.page,
            totalNum: (state) => state.article.totalNum,
        }),
    },
    data() {
        return {
            recommendFlag: false,
            i: 0,
        };
    },
    mounted() {
        // 滚动事件
        window.addEventListener("scroll", this.headleScroll, true);
    },
    methods: {
        ...mapActions({
            getArticleList: "article/getArticleList",
            getArticleTag: "article/getArticleTag",
            getCategoryList: "article/getCategoryList",
            getCategoryData: "article/getCategoryData",
        }),
        ...mapMutations({
            update: "article/update",
        }),
        loadMore() {
            console.log("load more...");
            if (this.page * 10 <= this.totalNum) {
                this.update({ page: this.page + 1 });
            }
        },
        headleScroll() {
            let scroll =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;
            if (scroll > this.i || scroll === 0) {
                this.i = scroll;
                this.recommendFlag = false;
                // console.log(1, scroll, this.i);
            } else {
                // console.log(2, scroll, this.i);
                this.i = scroll;
                this.recommendFlag = true;
            }
        },
    },
    created() {
        this.getArticleTag();
        this.getCategoryList();
    },
};
</script>

<style scoped lang="scss">
.swiper {
    border-radius: var(--border-radius);
    height: 316px;
    box-shadow: var(--box-shadow);
    background: var(--bg-second);
    margin-bottom: 1rem;
    padding: 0.5rem;
    box-sizing: border-box;
}
.cateage {
    padding: 16px 0;
    margin-bottom: 1rem;
    background: var(--bg-second);
    text-align: center;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    p:first-of-type {
        margin-top: 0.5rem;
    }
    p {
        margin-bottom: 0;
    }
    p:first-of-type span {
        color: var(--primary-color);
        font-size: 1.5rem;
    }
    p:last-of-type span {
        color: var(--primary-color);
        font-size: 1.1rem;
    }
}
.left {
    background-color: #e7eaee !important;
}
.leftarticle {
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    background-color: var(--bg);
}
.leftcount {
    border-radius: 0 0 var(--border-radius) var(--border-radius) !important;
    box-shadow: none !important;
    padding: 1rem;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--bg-second);
    overflow: hidden;
}
.leftcount li {
    position: relative;
    opacity: 1;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}
.right .sticky {
    position: sticky;
    transform: translateY(0px);
    margin-top: 0px;
    top: 1rem;
    margin-bottom: 1rem;
}
.footer footer {
    color: var(--second-text-color) !important;
    padding: 0 !important;
    background: transparent !important;
    border-top: 0 !important;
}
.footer ul li a {
    color: #000 !important;
    background: transparent !important;
}
ul li:hover {
    color: red !important;
}
.nodata {
    padding: 1rem;
    background: var(--bg-second);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    text-align: center;
    .empty {
        width: 100%;
        height: 60px;
        color: var(--second-text-color);
        font-size: 14px;
        line-height: 60px;
    }
}
</style>
